import React, {memo, useCallback, useState, useEffect, useRef} from 'react';
import {
  View,
  Modal,
  TouchableHighlight,
  Animated,
  Text,
  StyleSheet,
} from 'react-native';
import style from './CateFilterTop.style';
import {useSelector} from 'react-redux';
import Filter from './Filter';
import Colors from '../../utils/Colors';

const CateFilterModal = ({
  onRequestClose,
  select,
  showModal,
  onChange,
  onSelectSort,
  sortSelect,
}) => {
  const filters = useSelector(state => state.categroy.filters);
  const windowWidth = useSelector(state => state.common.windowWidth);
  const fadeAnim = useRef(new Animated.Value(windowWidth * 0.81)).current;

  const closeFilter = useCallback(() => {
    Animated.timing(fadeAnim, {
      toValue: windowWidth * 0.81,
      duration: 500,
      useNativeDriver: true,
    }).start(() => {
      onRequestClose();
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(() => {
    if (showModal) {
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }).start();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [showModal]);
  return (
    <Modal
      animationType={'none'}
      visible={showModal}
      transparent={true}
      onRequestClose={closeFilter}>
      <View style={style.modalView}>
        <View style={styles.filters}>
          <View style={styles.close}>
            <TouchableHighlight
              activeOpacity={0}
              style={styles.closeText}
              underlayColor={'rgba(0,0,0,0)'}
              onPress={closeFilter}>
              <Text style={styles.closeText}> </Text>
            </TouchableHighlight>
          </View>
          <Animated.View
            style={[styles.filtersBox, {transform: [{translateX: fadeAnim}]}]}>
            <Filter onRequestClose={onRequestClose} />
          </Animated.View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  filters: {
    backgroundColor: 'rgba(0,0,0,0)',
    width: '100%',
    height: '100%',
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'flex-end',
    flexDirection: 'row',
  },
  close: {
    width: '20%',
    backgroundColor: 'rgba(0,0,0,0)',
  },
  closeText: {
    width: '100%',
    height: '100%',
  },
  filtersBox: {
    backgroundColor: Colors.white,
    width: '80%',
    height: '100%',
  },
});

export default CateFilterModal;
